雖然border-image
的做法很簡潔也很 DRY,仍然有它的限制,比如說我們還是需要有個純色的背景。
還記得在鑽石形圖片中用過的clip-path
嗎?CSS clipping paths 驚人的功能是我們可以混合使用絕對長度和百分比,這給我們很大的彈性。
例如要製作20px
邊長大小的截角,它的樣式就像這樣:
.box {
background: grey;
clip-path: polygon(
20px 0, calc(100% - 20px) 0, 100% 20px,
100% calc(100% - 20px), calc(100% - 20px) 100%,
20px 100%, 0 calc(100% - 20px), 0 20px
);
}
雖然一行 CSS 就解決,但是要改截角大小的話卻要改動到8個地方,在維護上是挺不方便。
這個方法的好處是可以用任何東西當背景,尤其是圖片,之前示範的方法沒有一個能做到這樣的效果。而且因為 clip-path
可以被 CSS Animations 操作,所以不只能對截角大小加上動畫,連形狀也能加上動畫。
除了維護麻煩以及有限的瀏覽器支援外(IE 和 Edge 和 Safari 不支援 clip-path
),它的缺點是如果沒有足夠的padding
元素,裡面的文字有可能被切掉。前面示範的 gradient 方法文字則會溢出角落,因為它們只是背景無法限制內容區域。border-image
的方法如同普通的border
一樣會讓文字按照它 text wrap 的設定呈現。
想不到看起來簡單的截角實現起來挺複雜的,在 CSS Backgrounds & Borders Level 4 裡有了新的規範讓我們不用再這麼麻煩,corner-shape
能指定角落的形狀,配合border-radius
指定其大小。
.box {
border-radius: 15px;
corner-shape: bevel;
}